<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: zhangjx
 * @Date: 2023-05-29 14:55:07
 * @LastEditors: zhangjx
 * @LastEditTime: 2023-06-13 16:56:26
-->
<template>
	<div class="w-100">
		<el-steps :active="active" align-center>
			<el-step v-for="(item, index) in tabConfig" :key="index" :title="item.label" description="" />
		</el-steps>
		<div class="active-item mt10" v-if="active == 1">
			<AplidForm ref="formRef" v-bind="formConfig" :showBtn="false" v-model="formModel" @submit="onSubmit"> </AplidForm>
		</div>
		<AuthMenu v-else :key="active" :deviceType="active == 2 ? 0 : 1" :roleId="roleId" ref="webMenu" @refresh="onRefresh"></AuthMenu>

		<div class="fc mt10">
			<el-button class="ap-btn" type="primary" @click="onNext">
				{{ active === 3 ? '保存' : '保存并进入下一步' }}
			</el-button>
			<el-button class="ap-btn" type="primary" @click="onBack" v-if="active == 3"> 上一步 </el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import AuthMenu from './AuthMenu/index.vue'
import apiMod from '@/apiMod/index'
import { formConfig } from '../../config'
const emit = defineEmits(['refresh'])
const props = defineProps({
	api: Object,
	nowRowData: Object,
})
const formRef = ref(null)
const active: any = ref(1)
const formModel = ref({})
const roleId = ref()
const webMenu = ref(null)

const tabConfig = [
	{
		label: '角色信息',
		prop: 'base0',
	},
	{
		label: '配置后台菜单',
		prop: 'base1',
	},
	{
		label: '配置移动端菜单',
		prop: 'base2',
	},
]
const onRefresh = () => {
	if (active.value < 3) {
		active.value++
	}
}
const onBack = () => {
	active.value--
}
const onNext = () => {
	if (active.value !== 1) {
		webMenu.value.updateRoleMenu(roleId.value)
	} else {
		formRef.value.onSubmit()
	}
}
const onSubmit = (form, done) => {
	apiMod[props.api.add](form)
		.then((res) => {
			if (active.value < 3) {
				active.value++
			}
			roleId.value = res.data
			emit('refresh')
			done()
		})
		.catch(() => {
			done()
		})
}

onMounted(() => {})
</script>

<style scoped></style>
